/* 2. 配置CSS样式： */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 2.1 给 body 设置占满屏幕的高度： */
  min-height: 100vh;
  background-color: #222;

  /* 2.2 给父元素(body)设置flex布局, 让其最近的 子元素 */
  /* -》进行 flex布局型 的 ->"水平+垂直" 居中效果： */
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;

  /* 2.3 "flex-wrap属性" ->超出当前行宽度, 进行换行显示： */
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  /* 2.4 "gap属性" ->flex布局下, 设置[行间距]和[列间距] 为50px */
  gap: 50px;
}

.container .card {
  width: 300px;
  height: 300px;
  background-color: rgba(45, 45, 45, 1);
  border-radius: 20px;
  overflow: hidden;

  /* 相对定位 */
  position: relative;
}

/* 4. 交互后的CSS样式： */
/* 交互效果实现: */
/* 一、通过伪元素(before/after), 往card卡片盒子盖上一个 “用于实现交互效果图形”, 默认设置看不见; */
/* 二、伪元素, 其定位的 (left、top) 通过 “var” 去读取到已经自定义的 xy 的坐标值; */
/* 三、当用户鼠标经过card时, 设置的伪元素变为可见; */
/* 四、对于卡片实现的 “径向渐变图形” 交互, 径向渐变采取 “var” 去读取当前card行内样式设置的自定义颜色... */
.container .card::before {
  content: "";
  /* 绝对定位 */
  position: absolute;

  /* 4.2 使用 "自定义变量(x、y)"：var(引用的变量名称) */
  left: var(--x);
  top: var(--y);

  transform: translate(-50%, -50%);

  width: 600px;
  height: 600px;

  /* 4.3 径向渐变图形 ->采用的是 [CSS自定义属性] 定义好的颜色： */
  background: radial-gradient(var(--clr), transparent, transparent);

  opacity: 0;
  transition: opacity 0.5s;
}

/* 4.4 鼠标经过 - hover： */
.container .card:hover::before {
  opacity: 1;
}

/* 4.5 在有了 ->"径向渐变图形" 后 ->通过 "inset属性" ->设置嵌入在卡片一"渐变边框"效果 */
.container .card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 18px;
  background-color: rgba(45, 45, 45, 0.75);
}